<script setup lang="ts">
import { PostPatientAddAPI } from '@/apis/patient'
import type { PostPatientAddParams } from '@/types/sub_form'
import { ref, watch } from 'vue'

//表单校验
const formData = ref<PostPatientAddParams>({
  name: '新奇会',
  idCard: '410181200109195056',
  gender: 1,
  defaultFlag: 1,
})
//表单规则
const formRules = ref<UniHelper.UniFormsRules>({
  name: {
    rules: [
      { required: true, errorMessage: '请填写真实姓名' },
      { maxLength: 10, errorMessage: '请输入2-10个字符' },
    ],
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请填写身份证号' },
      { pattern: /^\d{18}$/, errorMessage: '请输入18位身份证号' },
    ],
  },
  gender: {
    rules: [
      { required: true, errorMessage: '请选择患者性别' },
      {
        validateFunction: (rule, value, data, calback) => {
          if (Number(formData.value.idCard.charAt(16)) % 2 !== value) {
            calback('选择性别与身份证不一致')
          } else {
            calback()
          }
        },
      },
    ],
  },
  defultFlag: {
    rules: [{ required: true, errorMessage: '请选择是否默认就诊人' }],
  },
})

const formRef = ref<UniHelper.UniFormsInstance>()
// 是否为默认就诊人
const onSwitchChange = (ev: UniHelper.SwitchOnChangeEvent) => {
  formData.value.defaultFlag = ev.detail.value ? 1 : 0
}
const props = defineProps<{id?: string}>()
console.log('页面加载获取页面参数',props);
uni.setNavigationBarTitle({title:props.id ? '编辑患者' : '添加患者'})
// 保存
const onSave = async () => {
  try {
    await formRef.value?.validate?.()
    // 验证通过后的逻辑
    console.log('验证通过', formData.value)
    const res = await PostPatientAddAPI(formData.value)
    console.log('res', res)
    uni.navigateBack()
  } catch (error) {
    console.log('验证失败', error)
  }
}
watch(
  () => formData.value.idCard,
  (newVal) => {
    if (newVal.length >= 17) {
      const genderNum = parseInt(newVal.charAt(16))
      formData.value.gender = genderNum % 2 === 1 ? 1 : 0
    }
  }
)

</script>

<template>
  <scroll-view>
    <view class="archive-page">
      <uni-forms border label-width="220rpx" ref="formRef" :value="formData" :rules="formRules">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{
              color: '#121826',
              backgroundColor: '#ffffff',
              disableColor: '#666',
              borderColor: 'transparent',
            }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            v-model="formData.idCard"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{
              color: '#121826',
              backgroundColor: '#ffffff',
              disableColor: '#666',
              borderColor: 'transparent',
            }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            v-model="formData.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch
              color="#20c6b2"
              style="transform: scale(0.7)"
              :checked="formData.defaultFlag === 1"
              @change="onSwitchChange"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="onSave">保存</button>
        {{ formData }}
      </uni-forms>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './form.scss';
</style>
